<script setup>
import BottomRow from "../components/BottomRow.vue";
import TopRow from "../components/TopRow.vue";
// import TableUserInfo from "../components/MyPage/TableUserInfo.vue";
// import ChainAddressInfo from "../components/MyPage/ChainAddressInfo.vue";
import ForwardIcon from "../components/icons/IconForward.vue";
import router from "../router";

import CopyButton from "../components/CopyButton.vue";
</script>

<script>
export default {
  data() {
    return {
      username: localStorage.loginUserName,
      address: localStorage.loginUserAddress,
      userID: localStorage.loginUserID,
    };
  },
  methods: {
    exit() {
      localStorage.setItem("isLogin", "false");
      localStorage.setItem("loginUserName", "");
      localStorage.setItem("loginUserID", -1);
      localStorage.setItem("loginUserAddress", "");
      router.push("/");
    },
    CopyUserAddress() {
      var e = document.getElementById("userAddress");
      let oInput = document.createElement("input");
      oInput.value = e.innerText;
      console.log(oInput.value);
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      oInput.remove();
    },
  },
};
</script>

<template>
  <main>
    <TopRow title="个人信息" />
    <div class="box">
      <div class="user_infotable">
        <router-link class="change_user_name" to="/ChangeName">
          修改用户名<ForwardIcon
            style="vertical-align: middle; margin-left: 8px"
          />
        </router-link>
        <div class="user_info">
          <img
            src="@/assets/UI/publisher.png"
            alt=""
            style="vertical-align: middle; margin-right: 8px"
          />
          {{ username }}
        </div>
      </div>

      <div class="address_infotable">
        <div class="titletext">区块链地址:</div>
        <div class="addresstext" id="userAddress" @click="CopyUserAddress">
          {{ address }}<CopyButton />
        </div>
      </div>
      <div @click="exit" class="exit_button">退出</div>
    </div>
    <BottomRow />
  </main>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  width: 100%;
  gap: 16px;

  position: absolute;
  height: 722px;
  left: 0px;
  right: 0px;
  top: 88px;
}
/* 用户信息栏 */
.user_infotable {
  width: 100%;

  height: 72px;

  z-index: 1;

  /* Inside auto layout */
  background-color: rgb(255, 255, 255);

  flex: none;

  align-self: stretch;
  flex-grow: 0;
}

.text4-7-2 {
  margin: 10px, 10px;
}
.change_user_name {
  position: absolute;

  width: 80%;
  height: 56px;

  text-align: right;

  color: #000000;
  font-weight: 400;
  font-size: 17px;
  line-height: 56px;

  right: 16px;
  top: 8px;

  z-index: 4;
}
.user_info {
  position: absolute;
  left: 18px;
  top: 14px;
  color: #000000;
  font-weight: 400;
  font-size: 17px;
  line-height: 24px;
  z-index: 1;
}
/* 地址信息栏 */
.address_infotable {
  width: 100%;
  height: auto;
  z-index: 1;

  flex: none;

  background: #ffffff;
}
.titletext {
  display: inline-block;
  height: 24px;
  margin-left: 16px;
  margin-top: 16px;

  font-weight: 400;
  font-size: 17px;
  line-height: 24px;
  color: #000000;

  mix-blend-mode: normal;
  opacity: 0.9;
}
.addresstext {
  display: inline-block;

  margin-left: 20px;
  margin-right: 20px;
  margin-top: 16px;
  margin-bottom: 16px;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #000000;
  word-break: break-all;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.exit_button {
  width: 100%;
  flex: none;
  height: 56px;
  left: 8px;
  right: 8px;
  top: 150px;
  background-color: #ffffff;
  text-align: center;

  line-height: 56px;

  color: #000000;
}
a {
  text-decoration: none;
}
a.router-link-active {
  text-decoration: none;
}
</style>
